
<template>
  <div class="mod-home">
<!--    个人信息-->
    <div class="personalInfo clear_float">
      <h3>个人信息</h3>
      <div class="clear_float" style="display: flex;">
        <el-form :label-position="labelPosition" label-width="80px" :model="userInfo" class="left" style="flex: 1;" :disabled="a">
          <el-form-item label="用户ID">
            <el-input v-model="userInfo.userId" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="用户名">
            <el-input v-model="userInfo.userName" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="创建时间">
            <el-input v-model="userInfo.createTime" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="更新时间">
            <el-input v-model="userInfo.updateTime" style="width: 400px"></el-input>
          </el-form-item>
        </el-form>
        <el-form :label-position="labelPosition" label-width="80px" :model="userInfo" class="right" style="flex: 1;" :disabled="a">
          <el-form-item label="手机号">
            <el-input v-model="userInfo.phone" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userInfo.email" style="width: 400px"></el-input>
          </el-form-item>
          <el-form-item label="加密密码">
            <el-input v-model="userInfo.password" style="width: 400px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="button">
        <button @click="modify">修改</button>
        <button @click="preservation">保存</button>
        <button @click="cancel">取消</button>
      </div>
    </div>
<!--    发布过的栏目-->
    <div class="publishedColumn">
      <h3>发布过的栏目</h3>
      <div>
        <el-table
          :data="currentPageData_column"
          border
          v-loading="dataListLoading"
          style="width: 100%;"
          disabled>
<!--          栏目ID-->
          <el-table-column
            prop="columnId"
            header-align="center"
            align="center"
            width="150"
            label="栏目ID">
          </el-table-column>
<!--          栏目名-->
          <el-table-column
            prop="columnName"
            header-align="center"
            align="center"
            label="栏目名"
          >
          </el-table-column>
<!--          所属分类-->
          <el-table-column
            prop="parentForm"
            header-align="center"
            align="center"
            label="所属分类">
          </el-table-column>
<!--          栏目logo-->
          <el-table-column
            prop="columnLogo"
            header-align="center"
            width="150"
            align="center"
            label="栏目logo">
            <template slot-scope="scope">
              <img :src="scope.row.columnLogo" style="width: 100px; height: 80px"/>
            </template>
          </el-table-column>
<!--          界面展示-->
          <el-table-column
            prop="showPic"
            header-align="center"
            align="center"
            width="150"
            label="界面展示">
            <template slot-scope="scope">
              <img :src="scope.row.showPic" style="width: 100px; height: 80px"/>
            </template>
          </el-table-column>
<!--          栏目官网-->
          <el-table-column
            prop="columnWeb"
            header-align="center"
            align="center"
            label="栏目官网">
            <template slot-scope="scope">
              <a :href="scope.row.columnWeb">点击进入</a>
            </template>
          </el-table-column>
<!--          发布者-->
          <el-table-column
            prop="userName"
            header-align="center"
            align="center"
            label="发布者">
          </el-table-column>
<!--          官方介绍-->
          <el-table-column
            prop="webIntroduce"
            header-align="center"
            align="center"
            width="400"
            label="官方介绍">
          </el-table-column>
<!--          栏目类型-->
          <el-table-column
            prop="columnType"
            header-align="center"
            align="center"
            label="栏目类型">
          </el-table-column>
<!--          授权信息-->
          <el-table-column
            prop="license"
            header-align="center"
            align="center"
            label="授权信息">
          </el-table-column>
<!--          详细介绍-->
          <el-table-column
            prop="detailIntroduce"
            header-align="center"
            align="center"
            label="详细介绍">
            <template slot-scope="scope">
              <a :href="scope.row.columnWeb">见详情</a>
            </template>
          </el-table-column>
<!--          下载次数-->
          <el-table-column
            prop="download"
            header-align="center"
            align="center"
            label="下载次数">
          </el-table-column>
<!--          是否推荐-->
          <el-table-column
            prop="recommend"
            header-align="center"
            align="center"
            label="是否推荐">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.recommend"
                active-color="#13ce66"
                inactive-color="#ff4949"
                :active-value="1"
                :inactive-value="0"
                disabled
                >
              </el-switch>
            </template>
          </el-table-column>
<!--          审核状态-->
          <el-table-column
            prop="verify"
            header-align="center"
            align="center"
            width="200"
            label="审核状态"
           >
            <template slot-scope="scope">
              <el-select v-model="scope.row.verify" disabled>
                <el-option
                  v-for="(item) in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </template>
          </el-table-column>
<!--          右侧操作栏-->
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="gotoDetail(scope.row.columnId)">详情/修改</el-button>
              <el-button type="text" size="small" @click="deleteHandle(scope.row.columnId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <span>共{{userInfo.columnList.length}}条数据</span>
          <button @click="prevPage_column()" class="b">
            上一页
          </button>
          <span>第{{currentPage_column}}页/共{{totalPage_column}}页</span>
          <button @click="nextPage_column()">
            下一页
          </button>
          前往第<input type="text" id="go_column" @change="toPage_column" style="width:20px;text-align: center">页
        </div>
      </div>
    </div>
<!--发布过的软件-->
    <div class="publishedSoftware">
      <h3>发布过的软件</h3>
      <div>
        <el-table
          :data="currentPageData"
          border
          v-loading="dataListLoading"
          style="width: 100%;">
<!--          软件ID-->
          <el-table-column
            prop="softId"
            header-align="center"
            align="center"
            width="145"
            label="软件ID">
          </el-table-column>
<!--          软件名称-->
          <el-table-column
            prop="softName"
            header-align="center"
            align="center"
            label="软件名称">
          </el-table-column>
<!--          所属分组-->
          <el-table-column
            prop="parentName"
            header-align="center"
            align="center"
            label="所属分组">
          </el-table-column>
<!--          软件logo-->
          <el-table-column
            prop="softLogo"
            header-align="center"
            align="center"
            width="130"
            label="软件logo">
            <template slot-scope="scope">
              <img :src="scope.row.softLogo" style="width: 100px; height: 80px"/>
            </template>
          </el-table-column>
<!--          界面展示-->
          <el-table-column
            prop="soft_showPic"
            header-align="center"
            align="center"
            width="150"
            label="界面展示">
            <template slot-scope="scope">
              <img :src="scope.row.soft_showPic" style="width: 100px; height: 80px"/>
            </template>
          </el-table-column>
<!--          版本信息-->
          <el-table-column
            prop="edition"
            header-align="center"
            align="center"
            label="版本信息">
          </el-table-column>
<!--          软件语言-->
          <el-table-column
            prop="language"
            header-align="center"
            align="center"
            label="软件语言">
          </el-table-column>
<!--          支持平台-->
          <el-table-column
            prop="platform"
            header-align="center"
            align="center"
            label="支持平台">
          </el-table-column>
<!--          软件大小-->
          <el-table-column
            prop="softSize"
            header-align="center"
            align="center"
            label="软件大小">
          </el-table-column>
<!--          下载地址-->
          <el-table-column
            prop="softAddr"
            header-align="center"
            align="center"
            label="下载地址">
            <template slot-scope="scope">
              <a :href="scope.row.softAddr">点击下载</a>
            </template>
          </el-table-column>
<!--          发布者ID-->
          <el-table-column
            prop="soft_userId"
            header-align="center"
            align="center"
            label="发布者ID">
          </el-table-column>
<!--          创建时间-->
          <el-table-column
            prop="soft_createTime"
            header-align="center"
            align="center"
            width="100"
            label="创建时间">
          </el-table-column>
<!--          更新时间-->
          <el-table-column
            prop="soft_updateTime"
            header-align="center"
            align="center"
            width="100"
            label="更新时间">
          </el-table-column>
<!--          审核状态-->
          <el-table-column
            prop="soft_verify"
            header-align="center"
            align="center"
            width="150"
            label="审核状态">
            <template slot-scope="scope">
              <el-select v-model="scope.row.soft_verify" disabled>
                <el-option
                  v-for="(item) in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
<!--          下载次数-->
          <el-table-column
            prop="soft_downloads"
            header-align="center"
            align="center"
            label="下载次数">
          </el-table-column>
<!--          简短介绍-->
          <el-table-column
            prop="soft_briefIntro"
            header-align="center"
            align="center"
            label="简短介绍">
          </el-table-column>
<!--          右侧操作-->
          <el-table-column
            fixed="right"
            header-align="center"
            align="center"
            width="150"
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click="gotoDetail_soft(scope.row.softId)">详情/修改</el-button>
              <el-button type="text" size="small" @click="deleteHandle_soft(scope.row.softId)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <span>共{{userInfo.softwareList.length}}条数据</span>
          <button @click="prevPage()" class="b">
            上一页
          </button>
          <span>第{{currentPage}}页/共{{totalPage}}页</span>
          <button @click="nextPage()">
            下一页
          </button>
          前往第<input type="text" id="go" @change="toPage" style="width:20px;text-align: center">页
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        labelPosition: 'right',
        userInfo:{},
        options: [{
          value: 0,
          label: '暂不审核'
        }, {
          value: 1,
          label: '通过'
        }, {
          value: 2,
          label: '不通过'
        }],
        a:true,//个人信息是否禁用
        currentPageData_columnList:[],
        currentPageData:[],//软件
        totalPage: 1, // 统共页数，默认为1
        currentPage_column: 1, //当前页数 ，默认为1
        currentPageData_column:[],//栏目
        totalPage_column: 1, // 统共页数，默认为1
        currentPage: 1, //当前页数 ，默认为1
        pageSize: 5, // 每页显示数量
        dataListLoading: false,
        dataListSelections: []
      };
    },
    mounted() {
      this.getUserInfo();
    },
    methods: {
      // 查看
      handleClick(row) {
        console.log(row);
      },
      //请求数据
      getUserInfo() {
        this.$http({
          url: this.$http.adornUrl('/generator/home/getPersonalDetail'),
          method: 'post',
          data:{
            userId:this.$route.query.userId
          }
        }).then((res) => {
          this.userInfo=res.data.data;
          this.page();
        })
      },
      // 获取/修改栏目详细信息
      gotoDetail(row){
        this.$router.replace({
          path:'/verify-columnInfo',
          query:{columnId:row}
        })
      },
      //获取/修改软件详细信息
      gotoDetail_soft(row){
        this.$router.replace({
          path:'/verify-softwareInfo',
          query:{softId:row}
        })
      },
      //分页
      page(){
        this.totalPage = Math.ceil(this.userInfo.softwareList.length / this.pageSize);//给软件分页
        this.totalPage_column = Math.ceil(this.userInfo.columnList.length / this.pageSize);//给栏目分页
        // 计算得0时设置为1
        this.totalPage = (this.totalPage = 0 ? 1 : this.totalPage);
        this.totalPage_column = (this.totalPage_column = 0 ? 1 : this.totalPage_column);
        this.setCurrentPageData();
      },
      // 设置当前页面数据
      setCurrentPageData() {
        let begin = (this.currentPage - 1) * this.pageSize;
        let end = this.currentPage * this.pageSize;
        let begin_column = (this.currentPage_column - 1) * this.pageSize;
        let end_column = this.currentPage_column * this.pageSize;
        this.currentPageData = this.userInfo.softwareList.slice(begin, end);//当前页软件显示的内容
        this.currentPageData_column = this.userInfo.columnList.slice(begin_column, end_column);//当前页栏目显示的内容
      },
      //上一页 软件
      prevPage() {
        if (this.currentPage === 1) return;
        this.currentPage--;
        this.setCurrentPageData();
      },
      //上一页 栏目
      prevPage_column() {
        if (this.currentPage_column === 1) return;
        this.currentPage_column--;
        this.setCurrentPageData();
      },
      // 下一页
      nextPage() {
        if (this.currentPage === this.totalPage) return;
        this.currentPage++;
        this.setCurrentPageData();
      },
      // 下一页
      nextPage_column() {
        if (this.currentPage_column === this.totalPage_column) return;
        this.currentPage_column++;
        this.setCurrentPageData();
      },
      //跳转到指定页数 软件
      toPage() {
        this.currentPage= document.getElementById("go").value;
        if(this.currentPage>this.totalPage){
          this.$message.error("超过总页数，请重新输入！");
        }
        this.setCurrentPageData();
      },
      //跳转到指定页数 栏目
      toPage_column() {
        this.currentPage_column= document.getElementById("go_column").value;
        if(this.currentPage_column>this.totalPage_column){
          this.$message.error("超过总页数，请重新输入！");
        }
        this.setCurrentPageData();
      },
      modify(){
        this.a=false
        this.$message({
          type: "success",
          message:"已解除禁用，可以修改"
        })
      },
      preservation(){
        this.a=truev
      },
      cancel(){
        this.a=true
        this.$message.error("已解除禁用，可以修改")
      },
      //删除栏目
      deleteHandle(id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.columnId
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/generator/column/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getUserInfo()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      },
      // 删除软件
      deleteHandle_soft (id) {
        var ids = id ? [id] : this.dataListSelections.map(item => {
          return item.softId
        })
        this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http({
            url: this.$http.adornUrl('/generator/software/delete'),
            method: 'post',
            data: this.$http.adornData(ids, false)
          }).then(({data}) => {
            if (data && data.code === 0) {
              this.$message({
                message: '操作成功',
                type: 'success',
                duration: 1500,
                onClose: () => {
                  this.getUserInfo()
                }
              })
            } else {
              this.$message.error(data.msg)
            }
          })
        })
      }
    }
  }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }
  .page{
    transform: translateX(80%);
    margin-top: 20px;
  }
  .page button,.page input{
    border: 1px solid #333;
    padding: 4px;
    border-radius: 4px;
  }
  .button{
    display: inline-block;
    position: absolute;
    left: 65%;
  }
  .button button{
     padding: 6px;
     border-radius: 6px;
    margin-right: 20px;
    width: 60px;
   }
  .button button:first-child{
    background-color: #45c2b5;
    color: white;
  }
  .button button:nth-child(2){
    background-color: #909090;
    color: white;
  }
  .button button:nth-child(3){
    border: 1px solid #909090;
  }
</style>


